<template>
  <view class="main">
    <view class="m-temp">
      <text>基础用法</text>
    </view>
    <eui-card>
      <text>这是一个基础卡片示例，内容较少。</text>
    </eui-card>

    <view class="m-temp">
      <text>卡片标题+右侧扩展内容</text>
    </view>
    <eui-card title="标题" showTitleLine="true">
      <template v-slot:extra>
       <view class="extra-view">
         <text class="extra-text">右侧拓展内容</text>
       </view>
      </template>
      <text class="item-text">条码: <text class="item-text-detail">1232222</text></text>
      <text class="item-text">包装: <text class="item-text-detail">1</text></text>
      <text class="item-text">件数: <text class="item-text-detail">1</text></text>
    </eui-card>

    <view class="m-temp">
      <text>样式1</text>
    </view>
    <view v-for="(item, index) in origData.details" :key="index" class="list-view">
      <eui-card :optionData="item" :options="options" type="receipt" tagStyle="background-color: #F4F4F4" />
    </view>

    <view class="m-temp">
      <text>样式2</text>
    </view>
    <view v-for="(item, index) in origData.goodsList" :key="index" class="list-view">
      <eui-card :optionData="item" :options="options_goods" type="detail" />
    </view>

  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      origData: {
        details: [
          {
            "c_id": "PD12310070006",
            "c_no": "ys12123131313131",
            "c_gname": "商贸有限公司商贸有限",
            "c_supply": "顺顺利利",
            "c_adname": "[02]本部",
            "c_num": 1,
            "c_quantity": 601.00,
            "c_user": "[0676]小陈",
            "c_date": "2023-11-08 10:05:03",
            "c_type": "1",
          },
          {
            "c_id": "PD12310070006",
            "c_no": "ys12123131313131",
            "c_gname": "[0132]小王子商贸有限公司",
            "c_supply": "顺顺利利",
            "c_adname": "[02]本部",
            "c_num": 1,
            "c_quantity": 601.00,
            "c_user": "[0676]小陈",
            "c_date": "2023-11-08 10:05:03",
            "c_type": "2",
          },
          {
            "c_id": "PD12310070006",
            "c_no": "ys12123131313131",
            "c_gname": "[0132]小王子商贸有限公司",
            "c_supply": "顺顺利利",
            "c_adname": "[02]本部",
            "c_num": 1,
            "c_quantity": 601.00,
            "c_user": "[0676]小陈",
            "c_date": "2023-11-08 10:05:03",
            "c_type": "3",
          },
          {
            "c_id": "PD12310070006",
            "c_no": "ys12123131313131",
            "c_gname": "[0132]小王子商贸有限公司",
            "c_supply": "顺顺利利",
            "c_adname": "[02]本部",
            "c_num": 1,
            "c_quantity": 601.00,
            "c_user": "[0676]小陈",
            "c_date": "2023-11-08 10:05:03",
            "c_type": "4",
          },
          {
            "c_id": "PD12310070006",
            "c_no": "ys12123131313131",
            "c_gname": "贸有限公司",
            "c_supply": "顺顺利利",
            "c_adname": "[02]本部",
            "c_num": 1,
            "c_quantity": 601.00,
            "c_user": "[0676]小陈",
            "c_date": "2023-11-08 10:05:03",
            "c_type": "1",
          },
        ], // 单据
        goodsList: [
          {
            "name": "格来德WKF-318S电水壶",
            "barcode": "025453/69322",
            "package": "1个",
            "num": 5,
            "c_num": 0,
            "quantity": 5,
          },
          {
            "name": "格来德WKF-318S电水壶",
            "barcode": "025453/69322",
            "package": "1个",
            "num": 5,
            "c_num": 0,
            "quantity": 5,
          },
          {
            "name": "格来德WKF-318S电水壶",
            "barcode": "025453/69322",
            "package": "1个",
            "num": 5,
            "c_num": 0,
            "quantity": 5,
          },
          {
            "name": "格来德WKF-318S电水壶",
            "barcode": "025453/69322",
            "package": "1个",
            "num": 5,
            "c_num": 0,
            "quantity": 5,
          },
        ],  //商品
      },
      options: [
        { label: '验收单号', name: 'c_no' },
        { label: '目的机构', name: 'c_gname' },
        { label: '供应商', name: 'c_supply' },
        { label: '部门', name: 'c_adname' },
        { label: '品种数(含赠品)', name: 'c_num' },
        { label: '总数量(含赠品)', name: 'c_quantity' },
        { label: '录入', name: 'c_user' },
        { label: '', name: 'c_date' },
      ],
      options_goods: [
        { label: '条码', name: 'barcode' },
        { label: '包装', name: 'package' },
        { label: '件数', name: 'num' },
        { label: '细数', name: 'c_num' },
        { label: '数量', name: 'quantity' },
      ],
    }
  },
  methods: {
    onClick(e){
      console.log(e)
    },
    actionsClick(text){
      uni.showToast({
        title:text,
        icon:'none'
      })
    }
  }
}
</script>

<route lang="json">
{
"style": {
"navigationBarTitleText": "Card"
}
}
</route>

<style lang="scss">
@import '@/main.scss';
.main {
  background-color: #F4F4F4;
  display: flex;
  padding: 0;
  width: 750rpx;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
}
.m-temp {
  display: flex;
  width: 100%;
  height: 75rpx;
  align-items: flex-end;
  color: #000000;
  font-size: 32rpx;
  padding: 0 0 10rpx 20rpx;
}
.item-text {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level4;
  color: $uni-text-color-hint;
  line-height: 37px;
  text-align: left;
  font-style: normal;
  margin-right: 16rpx;
}
.item-text-detail {
  color: $uni-text-color-primary;
}
.extra-view {
  background: $uni-text-color-weak;
}
.extra-text {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level4;
  color: $uni-text-color-hint;
}
.list-view {
  width: 750rpx;
}
</style>
